<template>
    <div class="page-profile-message">
        <Navigator>
            <template v-slot:center>
                <div class="title">消息通知</div>
            </template>
        </Navigator>
        <div class="body">
            <div class="messages" v-if="messages && messages.length">
                <div
                    class="item"
                    :class="{ readed: msg.isRead }"
                    v-for="(msg, index) in messages"
                    :key="index"
                    @click="toDetailPage(msg)"
                >
                    <div class="content">
                        <div class="name">{{ msg.name }}</div>
                        <div class="title">{{ msg.title }}</div>
                        <div class="desc">{{ msg.desc }}</div>
                    </div>
                    <div class="button">{{ msg.button }}</div>
                </div>
            </div>

            <div class="none" v-else>暂无消息~</div>
        </div>
    </div>
</template>

<script>
export default {
    components: {},

    data() {
        return {
            messages: []
        };
    },
    created() {
        this.getMessages();
    },
    methods: {
        async getMessages() {
            const col = this.$cloud.database().collection("user_message");
            const res = await col
                .where({
                    uid: this.$store.state.userInfo.uid
                })
                .get();

            if (res.data.length === 0) {
                await col.add({
                    uid: this.$store.state.userInfo.uid,
                    name: "系统通知",
                    title: "欢迎使用",
                    desc: "如有问题可在线反馈",
                    path:
                        "/article/detail?docId=b00064a76092328f14d0f85b79e8a831",
                    button: "立即查看",
                    isRead: false
                });
            }

            this.messages = res.data;
            console.log("消息列表", res.data);
        },

        async readMessage(msg) {
            const col = this.$cloud.database().collection("user_message");
            const res = await col.doc(msg._id).update({
                isRead: true
            });
            console.log("读取消息", res);
        },

        toDetailPage(msg) {
            this.$router.push({
                path: "/profile/index"
            });

            this.readMessage(msg);
        }
    }
};
</script>


<style lang="less" scoped>
.page-profile-message {
    color: #4e4e4e;
    padding-top: 100px;
    box-sizing: border-box;
    background: #f5f5f5;
    min-height: 100vh;

    .body {
        .messages {
            padding: 30px 30px;
            .item {
                background: #fff;
                border-radius: 10px;
                margin-bottom: 30px;

                .content {
                    padding: 40px 30px;

                    .name {
                        color: #999;
                        font-size: 24px;
                        margin-bottom: 20px;
                    }
                    .title {
                        font-size: 32px;
                        font-weight: bold;
                        margin-bottom: 30px;
                    }
                    .desc {
                        color: #666;
                        font-size: 26px;
                    }
                }

                .button {
                    padding: 30px 30px;
                    border-top: 1px solid #eee;
                }
            }

            .readed {
                .content {
                    .name {
                        color: #ccc;
                    }
                    .desc {
                        color: #999;
                    }
                    .title {
                        color: #999;
                    }
                }
            }
        }
        .none {
            padding-top: 100px;
            text-align: center;
        }
    }
}
</style>